/*
* @Author: liyongxuan
* @Create: 2018/4/12
* @description: 事件——三方组件
*/
<template>
    <div class="custom-box p-20 m-t-20">
        <el-row class="custom-title m-t-20 m-b-20">
            <h3>{{title}}</h3>
            <button type="button"
                @click="updialog(true)"
                class="custom-btn custom-btn-round m-l-15">
                <i class="fa fa-plus"></i>
            </button>
        </el-row>
        <el-table stripe :data="pageResult.resultData">
            <el-table-column label="ID" prop="id"></el-table-column>
            <el-table-column :label="title" prop="agencyName"></el-table-column>
            <el-table-column v-if="attr==5" label="投行角色" prop="bankRole">
              <template slot-scope="scope">
                  {{scope.row.bankRole | getDicNameById('bankRoleType')}}
              </template>
            </el-table-column>
            <el-table-column v-else label="人物" prop="personageId"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="updialog(false, scope.row)">编辑</el-button>
                <el-button type="text" v-if="scope.row.status==1">关联</el-button>
                <el-button type="text" v-else>未关联</el-button>
                <el-button type="text" @click="delEventAgency(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
        <el-dialog :visible.sync="popUp" :title="dialogTitle">
          <!-- 搜索企业 -->
          <el-form :model="companySearch">
            <el-row>
              <el-col :span="15">
                <el-form-item :label="`${title}名称`" label-width="110px">
                  <el-input auto-complete="off" v-model="companySearch.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4" :offset="1">
                <el-form-item label-width="0px">
                  <el-select v-model="companySearch.searchType" placeholder="请选择">
                    <el-option v-for="(item,index) in initView.openSearchNameType" :key="index" :label="item.dictName" :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-button type="primary" @click="searchList">搜索</el-button>
              </el-col>
            </el-row>
            <!-- 投行角色 -->
            <el-row v-if="attr==5">
              <el-form-item label="投行角色" label-width="110px">
                <el-select v-model="bankRole" placeholder="请选择">
                  <el-option v-for="(item,index) in initView.bankRoleType" :key="index" :label="item.dictName" :value="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
          </el-form>
          <!-- 搜索人物 -->
          <el-form :model="personCommonDto" v-if="!companyFlag&&attr!=5">
            <el-row>
              <el-col :span="16">
                <el-form-item label="人物名称" label-width="110px">
                  <el-input auto-complete="off" v-model="personCommonDto.selectValue"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label-width="0px">
                  <el-select v-model="personCommonDto.selectType" placeholder="请选择">
                    <el-option v-for="(item,index) in initView.intermediary" :key="index" :label="item.dictName" :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" :offset="1">
                <el-button type="primary" @click="getPersonInfo">搜索</el-button>
              </el-col>
            </el-row>
          </el-form>
          <CompanyInfoTable
            v-if="companyFlag"
            :mainCompanySearch="mainCompanySearch"
            ref="companyTable"
            @getName="getName"
            >
          </CompanyInfoTable>
          <div v-if="attr!=5">
            <el-table :data="personInfoData"  v-if="!personFlag">
              <el-table-column label="ID" prop="personId"></el-table-column>
              <el-table-column label="人物中文名" prop="personName">
                <template slot-scope="scope">
                  <el-button type="text" @click="getPersonId(scope.row.personId, scope.row.personName)">{{scope.row.personName}}</el-button>
                </template>
              </el-table-column>
              <el-table-column label="英文名"></el-table-column>
            </el-table>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveOrUpdate" round>完 成</el-button>
            <el-button @click="popUp=false" round>取 消</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import { EventAgencyDto, PageResult, InvestorPersonVo } from '../../../../api/Interface';
import ServiceApi from '../../../../service/event/event-agency-controller/index';
import { EventPublicSearchDto } from '../../../../service/event/Interface';
import { CompanySearch, PersonCommonDto } from '../../../../service/common/interface.ts';
import CompanyInfoTable from '../../../../components/companyTable/index.vue';
import EventService from '../../../../service/event/index';
@Component({
    components: {
        CompanyInfoTable, // 企业信息搜索table
    }
})
export default class Investor extends Vue {
    // refs
    public $refs: {
        companyTable: HTMLFormElement;
    };

    @Prop({ default: '投行' })
    public title: string;
    @Prop({ default: '投行信息' })
    public dialogTitle: string;
    @Prop({ default: -1 })
    public attr: number;

    public addOrEdit: boolean = true; // 添加或者编辑flag
    public popUp: boolean = false;
    public companyFlag: boolean = true; // 企业列表显示flag
    public personFlag: boolean = true; // 人物列表显示flag
    
    public companySearch: CompanySearch = {searchType: 'full_name'} as CompanySearch; // 根据条件搜索企业
    public personInfoData: Array<InvestorPersonVo> = []; // 人物信息数据
    public personCommonDto: PersonCommonDto = {} as PersonCommonDto; // 根据条件搜索人物信息
    public mainCompanySearch = {};
    public bankRole: number = 0; // 投行角色
    public companyId: string = '-1'; // 企业ID
    public personId: number = 0; // 人物ID
    public eventAgencyDto: EventAgencyDto = {} as EventAgencyDto;
    public pageResult: PageResult = {} as PageResult;
    public eventPublicSearchDto: EventPublicSearchDto = {'pageParam.pageIndex': 1, 'pageParam.pageSize': 10} as EventPublicSearchDto;
    public initView = {
      openSearchNameType: this.$store.state.user.dictionary.dicList.openSearchNameType, // 企业搜索类型
      intermediary: this.$store.state.user.dictionary.dicList.Intermediary, // 人物信息搜索类型
      bankRoleType: [{dictValue: 0, dictName: '请选择'}, ...this.$store.state.user.dictionary.dicList.bankRoleType], // 投行角色类型
    };

    // 声明周期钩子
    public mounted() {
      // console.log(JSON.stringify(this.$store.state.user.dictionary.dicList));
      this.getEventAgencyPage();
    }

    // 获取三方中介列表
    public async getEventAgencyPage() {
      this.eventPublicSearchDto.eventId = this.$route.params.eventId;
      this.eventPublicSearchDto.agencyType = this.attr;
      const data = await ServiceApi.getEventAgencyPage(this.eventPublicSearchDto);
      this.pageResult = data.data;
    }
    // 添加三方中介
    public async addSaveEventAgency() {
      const { resCode } = await ServiceApi.addSaveEventAgency(this.eventAgencyDto);
      if (resCode === '0') {
        this.$message.success('添加成功！');
        this.popUp = !this.popUp;
        this.getEventAgencyPage();
      }
    }
    // 编辑三方中介
    public async updateEventAgency() {
      const { resCode } = await ServiceApi.updateEventAgency(this.eventAgencyDto);
      if (resCode === '0') {
        this.$message.success('修改成功！');
        this.popUp = !this.popUp;
      }
    }
    // 添加或编辑弹窗'完成'按钮
    public saveOrUpdate() {
        if (this.attr === 5) {
          this.eventAgencyDto.bankRole = this.bankRole; // 投行角色
        } else {
          this.eventAgencyDto.personageId = this.personId; // 人物id
        }
        this.eventAgencyDto.agencyName = this.companySearch.name; // 中介名称
        this.eventAgencyDto.agencyId = Number(this.companyId); // 中介名称
        if (this.addOrEdit) {
          this.eventAgencyDto.agencyType = this.attr; // 三方中介类型
          this.eventAgencyDto.eventId = Number(this.$route.params.eventId); // 事件id
          this.addSaveEventAgency();
        } else {
          this.updateEventAgency();
        }
    }
    // 删除三方中介
    public async delEventAgency(id: number) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { resCode } = await ServiceApi.delEventAgency(id.toString());
        if (resCode === '0') {
          this.$message.success('删除成功！');
          this.getEventAgencyPage();
        }
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    }
    // 添加 & 编辑按钮
    public updialog(flag: boolean, param: EventAgencyDto = this.eventAgencyDto) {
      this.personCommonDto = {'pageParam.pageIndex': 1, 'pageParam.pageSize': 10, selectType: 'cn_name', selectValue: ''} as PersonCommonDto; // 初始化搜索人物条件
      this.companySearch = {searchType: 'full_name', name: ''} as CompanySearch; // 初始化企业搜索
      this.personInfoData = [];
      this.companyFlag = true;
      this.personFlag = true;
      this.eventAgencyDto = param; // 主id
      this.popUp = !this.popUp;
      if (!flag) {
        this.companySearch.name = param.agencyName;
        this.bankRole = param.bankRole;
      } else {
        this.bankRole = 0;        
      }
      this.addOrEdit = flag;
    }
    // 弹窗搜索按钮,查询企业信息
    public async searchList() {
        this.companyFlag = true;
        this.mainCompanySearch = {
            name: this.companySearch.name,
            searchType: this.companySearch.searchType,
            attribute: this.attr,
        };
        this.$nextTick( () => {
            this.$refs.companyTable.getCompanyOpenSearchData(this.mainCompanySearch);
        });
    }
    // 获取企业id+name
    public getName(company: {id: number, name: string}) {
        this.companyFlag = false;
        this.personFlag = false;
        this.companySearch.name = company.name;
        this.companyId = company.id.toString();
    }
    // 获取人物信息列表
    public async getPersonInfo() {
        this.personFlag = false;
        this.companyFlag  = false;
        this.personCommonDto.companyId = this.companyId;
        this.personCommonDto.attr = this.attr;
        const res = await EventService.getInvestorInvestor(this.personCommonDto);
        if (res.resCode === '0') {
            this.personInfoData = res.data.resultData;
        }
    }
    // 获取人物id
    public getPersonId(personId: number, personName: string) {
      this.personFlag = true;
      this.personId = personId;
      this.personCommonDto.selectValue = personName;
    }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
